<template>

    <div class="virtual-list-container" ref="container" @scroll="handleScroll">
        <div class="virtual-list-phantom" :style="{ height: listHeight + 'px' }"></div>
        <div class="virtual-list-content" :style="{ transform: `translate3d(0, ${offset}px, 0)` }">
            <div v-for="item in visibleData" :key="item._id" class="list-item"
                @click="router.push(`/xiang?_id=${item._id}`)" :style="{ height: itemHeight + 'px' }">

                <div><img style="width: 5.6686rem; border-radius: .5669rem;" :src="item.img[0]" alt=""></div>
                <div class="right">
                    <div class="title" style="font-size: 1.0204rem;">{{ item.name }}</div>
                    <div class="good"><span
                            style="background-color: #f7f7f7; padding: .2834rem; border-radius: 1.1337rem;">好货上新</span>
                    </div>
                    <div class="newprice">
                        <div>
                            ￥{{ item.price }} <span class="oldprice">￥{{ item.original }}</span>
                        </div>
                        <div class="but">
                            加入购物车
                        </div>
                    </div>
                </div>

            </div>
            <div v-if="loading" class="loading">加载中...</div>
            <div v-else class="loading">到底了没有更多了！</div>
        </div>

    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter();
// vue3
import { ref, computed, onMounted, onUnmounted } from 'vue'
import axios from 'axios';
// 配置参数
const itemHeight = 160  // 每项高度
const visibleCount = 6  // 可视区域显示的数量
const bufferCount = 2   // 上下缓冲的数量
const pageSize = 10     // 每次加载的数量
let currentpage = 1

// 数据相关
const allData = ref([])
const newlist = ref([])
const start = ref(0)
const loading = ref(false)


// 获取后端数据
const getData = async () => {
    const { data: { data } } = await axios.get('http://localhost:3000/lzl/getlist',
        {
            params: {
                page: currentpage,
                pageSize
            }
        }
    )
    allData.value = [...allData.value, ...data]
}

// 加载更多数据
const loadMoreData = async () => {
    if (loading.value) return
    loading.value = true
    currentpage++
    console.log(currentpage);

    getData()
    // 模拟异步请求
    await new Promise(resolve => setTimeout(resolve, 2000))

    loading.value = false
}

// 计算列表总高度
const listHeight = computed(() => {
    return allData.value.length * itemHeight
})

// 计算偏移量
const offset = computed(() => {
    return start.value * itemHeight
})

// 计算可视区域数据
const visibleData = computed(() => {
    const startIndex = Math.max(0, start.value - bufferCount)
    const endIndex = Math.min(allData.value.length, start.value + visibleCount + bufferCount)
    return allData.value.slice(startIndex, endIndex)
})

// 处理滚动事件
const container = ref(null)
const handleScroll = () => {
    if (!container.value) return

    // 更新起始索引
    const scrollTop = container.value.scrollTop
    start.value = Math.floor(scrollTop / itemHeight)

    // 检查是否需要加载更多
    const clientHeight = container.value.clientHeight
    const scrollHeight = container.value.scrollHeight
    if (scrollTop + clientHeight >= scrollHeight - 5 && !loading.value) {
        loadMoreData()
    }
}


onMounted(() => {
    getData()
    // loadInitialData()
})


</script>

<style scoped lang="less">
.newprice {
    display: flex;

}

.virtual-list-container {
    height: calc(100vh - 60px);
    overflow-y: auto;
    position: relative;
    border: 1px solid #ccc;
    background-color: #f7f7f7;
    padding-bottom: 50px;
}

.virtual-list-phantom {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: -1;
}

.virtual-list-content {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
}

.list-item {
    padding: 10px;
    position: relative;
    display: flex;
    align-items: center;
    background-color: #fff;
    margin: .5669rem;
    border-radius: .5669rem;

    .right {
        margin-left: .5669rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 100%;

        .title {
            font-size: 1.077rem;
            color: #757575;
        }

        .good {
            font-size: .7936rem;
            color: #ff0000;
            // background-color: #f7f7f7;
            display: flex;
        }

        .newprice {
            font-size: 1.077rem;
            color: #ff0000;
            display: flex;
            align-items: center;
            // justify-content: space-between;

            .oldprice {
                color: #999999;
                font-size: .7936rem;
                text-decoration: line-through;
            }

            .but {
                position: absolute;
                right: .5669rem;
                background-color: #ff0000;
                color: #fff;
                border-radius: 1.1337rem;
                font-size: .7936rem;
                padding: .3401rem;
            }
        }
    }
}

.loading {
    text-align: center;
    padding: 10px;
    color: #999;
}
</style>